<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
      @click="getAllUserReportListByTimeDesc"></el-button>
    <!-- 表格
      data 展示数据 —— 数组类型
    -->
    <el-table style="width: 100%;" border :data="list">
      <el-table-column prop="id" label="id" width="80" align="center"></el-table-column>
      <el-table-column prop="createUserName" label="举报人" width="100" align="center"></el-table-column>
      <el-table-column prop="getUserDynamicParam" label="举报内容" width="180" align="center">
        <template slot-scope="{ row, $index }">
          <p v-if="row.chatMes">{{ row.chatMes }}</p>
          <p v-if="row.commentMes">{{ row.commentMes }}</p>
          <p v-if="row.getUserDynamicParam">{{ row.getUserDynamicParam.content }}</p>
        </template>
      </el-table-column>

      <el-table-column prop="getUserDynamicParam" label="动态举报内容" align="center" width="130">
        <template slot-scope="{ row, $index }">
     <!--     <template v-if="row.getUserDynamicParam">
            <el-image v-for="item in row.getUserDynamicParam.picUrl" :key="item"
              style="width: 40px; height: 40px; margin-right: 5px;" :src="item"
              :preview-src-list="row.getUserDynamicParam.picUrl"></el-image>
          </template> -->
          <template v-if="row.getUserDynamicParam">
            <video :src="$staticURL+row.getUserDynamicParam.videoUrl" controls="controls" style="width:60px;height:60px;"></video>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="reportType" label="举报类型" align="center" width="80"></el-table-column>
      <el-table-column prop="reason" label="举报原因" align="center" width="160"></el-table-column>
      <el-table-column label="举报上传图片" align="center">
        <template slot-scope="{ row, $index }">
          <el-image style="width: 40px; height: 40px; margin-right: 5px;"
            :src="$staticURL+row.picUrl" v-if="row.picUrl"  :preview-src-list="[$staticURL+row.picUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="reportClass" label="举报种类" align="center" width="80"></el-table-column>
      <el-table-column prop="createTime" label="举报时间" align="center" width="100"></el-table-column>
      <el-table-column label="举报结果" align="center" width="100"
        :filters="[{ text: '举报驳回', value: '-1' }, { text: '待审核', value: '0' }, { text: '举报通过', value: '1' }]"
        :filter-method="filterTag" filter-placement="bottom-end">
        <template slot-scope="{ row, $index }">
          <p v-if="row.status == -1">举报驳回</p>
          <p v-else-if="row.status == 0">待审核</p>
          <p v-else>举报通过</p>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="驳回原因" align="center">
        <!-- <template slot-scope="{ row, $index }"><p v-if="row.auditStatus == -1">{{ row.auditResult }}</p></template> -->
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="{ row, $index }" v-if="row.status == 0">
          <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
          <el-popconfirm title="是否通过该举报？" icon="el-icon-info" icon-color="red" @confirm="getPassDynamic(row.id)">
            <el-tooltip content="通过举报" placement="top" slot="reference">
              <el-button type="success" icon="el-icon-check"></el-button>
            </el-tooltip>
          </el-popconfirm>
          <el-popconfirm style="margin-left:10px" title="是否驳回该举报？" icon="el-icon-info" icon-color="red"
            @confirm="getRejectReport(row.id)">
            <el-tooltip content="驳回举报" placement="top" slot="reference">
              <el-button type="danger" icon="el-icon-close"></el-button>
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框  -->
    <el-dialog title="选择处罚" :visible.sync="dialogFormVisible">
      <el-form style="width:80%">
        <el-form-item label="处罚内容" label-width="100px" prop="value">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="违规描述" label-width="100px" prop="auditResult">
          <el-input autocomplete="off" v-model="auditResult"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getPassReport">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Report',
  mounted() {
    //获取列表数据方法
    this.getAllUserReportListByTimeDesc()
  },
  data() {
    return {
      //页码
      pageNumber: 1,
      //每页数量
      pageSize: 10,
      //总条数
      total: 0,
      //列表数据
      list: [],
      // 对话框
      dialogFormVisible: false,
      // 选择违规id
      reportId: '',
      // 显示内容
      value: '',
      // 违规描述
      auditResult: '',
      // 处罚内容
      options: []
    }
  },
  methods: {
    async getAllUserReportListByTimeDesc() {
      let res = await this.$API.report.getAllUserReportListByTimeDesc({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      })
      this.total = res.data.length;
      this.list = res.data;
    },
    // 打开对话框
    getPassDynamic(id) {
      this.value = '';
      this.auditResult = '';
      this.dialogFormVisible = true;
      this.reportId = id;
      this.getPenaltyConfigurationList();
    },
    // 查询处罚内容
    async getPenaltyConfigurationList() {
      let res = await this.$API.report.getPenaltyConfigurationList()
      this.options = res.data
    },
    // 举报成功
    async getPassReport() {
      if (this.value != '' && this.auditResult != '') {
        let res = await this.$API.report.getPassReport({
          reportId: this.reportId,
          penaltyConfigurationId: this.value,
          auditResult: this.auditResult
        })
        this.dialogFormVisible = false;
        this.getAllUserReportListByTimeDesc()
      } else {
        this.$message.error('请选择处罚内容和填写违规描述');
        return false
      }
    },
    //驳回举报
    async getRejectReport(id) {
      let auditResult = prompt('驳回原因：');
      if (auditResult != null && auditResult != "") {
        let res = await this.$API.report.getRejectReport({
          reportId: id,
          auditResult: auditResult
        })
        this.getAllUserReportListByTimeDesc()
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val
    },
    filterTag(value, row) {
      return row.status == value;
    }
  }
}
</script>

<style>

</style>
